<template>
  <div>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-date"></i> 商品管理</el-breadcrumb-item>
            <el-breadcrumb-item><i class="el-icon-date"></i> 商品信息</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-form ref="goodsForm" :model="goodsForm" label-width="80px">
      <el-form-item label="商品名称">
        <el-input v-model="goodsForm.name"></el-input>
      </el-form-item>
      <el-form-item label="商品类别">
        <el-select v-model="goodsForm.category" placeholder="请选择商品类别">
          <el-option label="中餐" value="中餐"></el-option>
          <el-option label="自助" value="自助"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品图片">
        <el-upload
          class="avatar-uploader"
          :action="baseUrl + 'api/uploadimg'"
          :show-file-list="false"
          :on-success="uploadImg"
          :before-upload="beforeImgUpload">
          <img v-if="goodsForm.goodsCoverUrl" :src="baseImgPath + goodsForm.goodsCoverUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
			</el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="goodsForm.price"></el-input>
      </el-form-item>
      <el-form-item label="商品积分">
        <el-input v-model="goodsForm.score"></el-input>
      </el-form-item>
      <el-form-item label="是否上架">
        <el-switch v-model="goodsForm.status"></el-switch>
      </el-form-item>
      <el-form-item label="商品详情">
        <quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
  import 'quill/dist/quill.snow.css'
  import { quillEditor } from 'vue-quill-editor';
  export default {
    data() {
      return {
        goodsForm: {
          name: '',
          category: '',
          goodsCoverUrl: '',
          price: '',
          score: '',
          status: '',
          detail: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    },
    components: {
    	quillEditor
    },
  }
</script>

<style>

</style>

